<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" /> 
<title>文档的标题</title>
</head>

<body>

<!-- The data encoding type, enctype, MUST be specified as below -->
<form id="upload" enctype="multipart/form-data" action="save_file.php" method="POST">
    <!-- MAX_FILE_SIZE must precede the file input field -->
    <input type="hidden" name="MAX_FILE_SIZE" value="1024" />
    <!-- Name of input element determines name in $_FILES array -->
    Send this file: <input id="avatar" name="avatar" type="file" />
    <!-- <input type="submit" value="Send File" /> -->
    <button type="button" onclick="ajaxUpload()">点我上传</button>
</form>


<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
    function ajaxUpload(){

        const fd = new FormData()

        const avatarFile = document.getElementById('avatar').files[0]
        console.log(' name: '+avatarFile.name + " size: "+avatarFile.size + " type: "+avatarFile.type)

        fd.append('avatar',avatarFile)

        $.ajax({
            url: "save_file.php",
            method: 'POST',
            data: fd,
            processData: false,
            contentType: false,
        }).then(res => {
            console.log(res)
            alert(res)
        },err => {
            console.log(err)
            alert('出错'+err)
        })

        // alert('Yes Its me')
    }
</script>
</body>

</html>